<template>
  <div>
    <el-form :inline="true" :model="params" class="demo-form-inline">
    <el-form-item label="uuid">
      <el-input v-model="params.uuid" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="状态">
      <el-select
        v-model="params.status"
        placeholder="请选择"
        clearable
      >
        <el-option label="未审核" value="0" />
        <el-option label="未通过" value="1" />
        <el-option label="已通过" value="2" />
      </el-select>
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>
    <el-card>
        <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
  <el-input
    v-model="reason"
    :rows="2"
    type="textarea"
    placeholder="请输入驳回理由"
  />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="reject">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="uuid" label="uuid" width="240">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          width="180"
        ></el-table-column>
        <el-table-column prop="avatar" label="头像" width="100">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-avatar :src="scope.row.avatarUrl" v-if="scope.row.avatarUrl">
              </el-avatar>
              <el-avatar
                v-else
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              >
              </el-avatar>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="vip" label="角色" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.vip == 1 ? 'warning' : 'success'">{{
              scope.row.vip == 1 ? "vip1" : (scope.row.vip == 2 ? 'vip2' :'普通用户')
            }}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column prop="vip" label="图片" width="380">
          <template #default="scope">
            <div style="display:flex">
                <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.pictureUrl[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.pictureUrl"
              :initial-index="2"
              :preview-teleported="true"
              fit="cover"
            />
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.pictureUrl[1]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.pictureUrl"
              :initial-index="4"
              :preview-teleported="true"
              fit="cover"
            />
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.pictureUrl[2]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.pictureUrl"
              :initial-index="4"
              :preview-teleported="true"
              fit="cover"
            />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="理由" width="180">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="180">
          <template #default="scope">
            <el-tag
              :type="
                scope.row.status == 0
                  ? 'info'
                  : scope.row.status == 1
                  ? 'danger'
                  : 'success'
              "
              >{{
                scope.row.status == 0
                  ? "未审核"
                  : scope.row.status == 1
                  ? "未通过"
                  : "已通过"
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作">
          <template #default="scope">
            <el-button
              size="small"
              type="success"
              @click="btnPass(scope.row._id)"
              >通过</el-button
            >

            <el-button size="small" type="danger" @click="showModal(scope.row._id)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="10"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import myUtil from "../../util/util.js";
const tableData = ref([]);
const total = ref(0);
const dialogVisible = ref(false)
const reason = ref('')
const selectId = ref('')
const params = ref({
  uuid: "",
  pageNo: 1,
  status: "",
});
onMounted(() => {
  getList();
});
const search = () => {
    params.value.pageNo = 1
    getList()
}
const showModal = (id) => {
    dialogVisible.value =true
    selectId.value = id
}
const getList = async () => {
  let tempParams = JSON.stringify(params.value);
  tempParams = JSON.parse(tempParams);
  for (var i in tempParams) {
    if (!tempParams[i]) {
      delete tempParams[i];
    }
  }
  console.log("tempParams", tempParams);
  let res = await axios.get("/wxapi/screenshotRecord/getList", {
    params: tempParams,
  });
  if (res.data.code == 200) {
    tableData.value = res.data.data.result;
    total.value = res.data.data.total;
  }
};
const reject = async() => {
    console.log('1111')
    let res = await axios.post("/wxapi/screenshotRecord/upDateStatus", {
    id:selectId.value,
    status: "1",
    reason:reason.value
  });
  if (res.data.code == 200) {
    ElMessage.success("成功");
dialogVisible.value = false

    getList();

  } else {
    ElMessage.error("失败");
  }
}
const handleCurrentChange = (e) => {
    params.value.pageNo = e
    getList();
}
const btnPass = async (id) => {
  let res = await axios.post("/wxapi/screenshotRecord/upDateStatus", {
    id,
    status: "2",
  });
  if (res.data.code == 200) {
    ElMessage.success("成功");
    getList();
  } else {
    ElMessage.error("失败");
  }
};
</script>
